<template>
  <FullBox>
    <div class="dlText-120 list-b-12 ">
      <CellBox title="基础信息">
        <FlexBox :list="3">
          <ElFormItemBox label="产品名称" :prop="`productName`">
            <ElInputBox :data="data.baseData" dataName="productName" :disabled="!isEdit" />
          </ElFormItemBox>
          <ElFormItemBox label="产品来源" :prop="`productSource`">
            <ElSelectBox :data="data.baseData" dataName="productSource" :options="proxy.$optionsArr.productSource"
              :disabled="!isEdit" />
          </ElFormItemBox>
          <ElFormItemBox label="产品类型" :prop="`productType`">
            <ElSelectBox :data="data.baseData" dataName="productType" :options="options.productType"
              :disabled="!isEdit" />
          </ElFormItemBox>
          <ElFormItemBox label="产品单价" :prop="`productPrice`" v-permission="`MenuCode1-6-4`">
            <ElNumberBox :data="data.baseData" dataName="productPrice" unit="元" :disabled="!isEdit"
              @changeBtn="setPriceBtn" />
          </ElFormItemBox>
          <ElFormItemBox label="最低金额" :prop="`minimumAmount`" v-permission="`MenuCode1-6-4`">
            <ElNumberBox :data="data.baseData" dataName="minimumAmount" unit="元" :disabled="!isEdit" />
          </ElFormItemBox>
          <ElFormItemBox label="产品要求" :prop="`productRequirement`" class="wAuto">
            <ElInputBox :data="data.baseData" dataName="productRequirement" type="textarea" :disabled="!isEdit" />
          </ElFormItemBox>
        </FlexBox>
      </CellBox>
      <el-divider />
      <CellBox title="产品信息">
        <FlexBox :list="3">
          <ElFormItemBox label="产品样式" :prop="`productStyle`">
            <ElSelectBox :data="data.baseData" dataName="productStyle" :options="proxy.$optionsArr.productStyle"
              :disabled="!isEdit" />
          </ElFormItemBox>
          <ElFormItemBox label="产品单位" :prop="`productUnit`">
            <ElSelectBox :data="data.baseData" dataName="productUnit" :options="proxy.$optionsArr.productUnit"
              :disabled="!isEdit" />
          </ElFormItemBox>
          <ElFormItemBox label="贴标方式" :prop="`tagAffixWay`">
            <ElSelectBox :data="data.baseData" dataName="tagAffixWay" :options="proxy.$optionsArr.tagAffixWay"
              :disabled="!isEdit" />
          </ElFormItemBox>
          <template v-if="[2, 3, 4].includes(data.baseData?.productStyle)">
            <ElFormItemBox label="出标方向" :prop="`outDirection`">
              <ElSelectBox :data="data.baseData" dataName="outDirection" :options="proxy.$optionsArr.outDirection"
                :disabled="!isEdit" />
            </ElFormItemBox>
            <template v-if="[2, 4].includes(data.baseData?.productStyle)">
              <ElFormItemBox label="卷向" :prop="`scrollDirection`">
                <ElSelectBox :data="data.baseData" dataName="scrollDirection"
                  :options="proxy.$optionsArr.scrollDirection" :disabled="!isEdit" />
              </ElFormItemBox>
              <ElFormItemBox label="卷芯大小" :prop="`mandrelSize`">
                <ElNumberBox :data="data.baseData" dataName="mandrelSize" unit="mm" :disabled="!isEdit" />
              </ElFormItemBox>
              <ElFormItemBox label="外直径不超过" :prop="`notOverDiameter`">
                <ElNumberBox :data="data.baseData" dataName="notOverDiameter" unit="mm" :disabled="!isEdit" />
              </ElFormItemBox>
            </template>
          </template>
        </FlexBox>
      </CellBox>
      <el-divider />
      <CellBox title="阶梯价格" v-permission="'MenuCode1-6-4'">
        <TableBoxMx :data="{
          disabled: !isEdit,
          tbody: data.productSteppedPriceInfoList,
          thead: [
            {
              label: '阶梯数量',
              prop: 'productSteppedCount',
              align: 'center',
              width: 200,
              formType: 'number',
              changeBtn: (value: any, row: any) => {
                if (value) {
                  const isOk = proxy.$hasMultipleMatches(data.productSteppedPriceInfoList, (item: any) => Number(item.productSteppedCount) === Number(value))
                  if (isOk) {
                    proxy.$message('阶梯数量已存着', 'error')
                    row.productSteppedCount = null
                    return
                  }
                  proxy.$sortArr(data.productSteppedPriceInfoList, 'productSteppedCount')
                }
              }
            },
            {
              label: '阶梯价格',
              prop: 'productSteppedPrice',
              align: 'center',
              width: 200,
              formType: 'number',
              changeBtn: (value: any, row: any) => {
                if (value) {
                  const _price = props.data.baseData.productPrice
                  console.log(`${value}/${_price}`);
                  row.discount = proxy.$count(`${value}/${_price}`, 6)
                } else {
                  row.discount = null
                }
              }
            },
            {
              label: '折扣率',
              prop: 'discount',
              align: 'center',
              width: 200,
              formType: 'number',
              changeBtn: (value: any, row: any) => {
                if (value) {
                  const _price = props.data.baseData.productPrice
                  row.productSteppedPrice = proxy.$count(`${_price}*${value}`, 6)
                } else {
                  row.productSteppedPrice = null
                }
              }
            },
            {
              label: '备注',
              prop: 'remark',
              align: 'left',
              width: null,
              formType: 'text',
            },
          ],
          operation: [
            {
              label: '删除',
              icon: 'Delete'
            }
          ],
          add: {
            productCode: data.baseData.productCode,
            productSteppedPriceCode: '',
            productSteppedCount: null,
            productSteppedPrice: null,
            discount: null,
            remark: ''
          }
        }">
        </TableBoxMx>
      </CellBox>
      <el-affix position="bottom" :offset="60" v-if="isEdit">
        <div class="flex-center-center">
          <el-button type="primary" @click="saveBtn(data.baseData)">保存业务信息</el-button>
        </div>
      </el-affix>
    </div>
  </FullBox>
</template>
<script setup lang="ts">
import '../pageCss.scss'; // 引入样式
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;//数据源
    isEdit?: boolean;//是否編輯
    options?: any;//数据组
    setState?: Function;//更改状态
  }>(),
  {
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'saveBtn'): void;
}>();
//修改价格
const setPriceBtn = (value: any) => {
  const factor = 10000;
  props.data.productSteppedPriceInfoList = props.data.productSteppedPriceInfoList.map((el: any) => ({
    ...el,
    productSteppedPrice: value ? Math.floor(proxy.$math.multiply(value, el.discount, factor)) / factor : null
  }))
};
const saveBtn = (form: any) => {
  if (!!!form.productName) {
    proxy.$message('产品名称不能为空', 'error')
    return
  }
  Promise.all([
    UpdateProductBaseData(),//修改生产信息
    UpdateProductSteppedPriceInfo(),//修改阶梯价信息
  ]).then((res: any) => {
    if (props.setState && typeof props.setState === 'function') {
      props.setState(2, '保存成功')
    }
  }).catch(() => {

  });
};

//修改产品基础信息
const UpdateProductBaseData = () => {
  return new Promise((resolve, reject) => {
    proxy.$api.OrderBusniess.UpdateProductBaseData(props.data.baseData)
      .then((res: any) => {
        UpdateProductInfoData()
        resolve(res)
      })
      .catch((e: any) => {
        reject(e)
      });
  });
};
//修改产品信息
const UpdateProductInfoData = () => {
  return new Promise((resolve, reject) => {
    proxy.$api.OrderBusniess.UpdateProductInfoData(props.data.baseData)
      .then((res: any) => {
        resolve(res)
      })
      .catch((e: any) => {
        reject(e)
      });
  });
};
//修改阶梯价信息
const UpdateProductSteppedPriceInfo = () => {
  return new Promise((resolve, reject) => {
    const _productCode = props.data.baseData.productCode
    const _productSteppedPriceInfoList = props.data.productSteppedPriceInfoList.filter((item: any) => item.productSteppedCount)
    proxy.$api.OrderBusniess.UpdateProductSteppedPriceInfo({
      productCode: _productCode,
      productSteppedPriceInfoList: _productSteppedPriceInfoList.map((el: any) => ({
        productCode: _productCode, // 产品编码
        productSteppedPriceID: el.productSteppedPriceID, // 主键
        productSteppedPriceCode: el.productSteppedPriceCode, // 阶梯价格编码（唯一编码）
        productSteppedCount: el.productSteppedCount, // 阶梯数量
        productSteppedPrice: el.productSteppedPrice, // 阶梯价格
        discount: el.discount, // 折扣率
        remark: el.remark // 备注
      }))
    })
      .then((res: any) => {
        resolve(res)
      })
      .catch((e: any) => {
        reject(e)
      });
  });
};
onMounted(() => {
});
</script>
